<template>
  <div class="Dhome">
    <el-row :gutter="20">
      <el-col :span="8">
        <card1></card1>
      </el-col>
      <el-col :span="8">
        <card2></card2>
      </el-col>
      <el-col :span="8">
        <card3></card3>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <card4></card4>
      </el-col>
      <el-col :span="12">
        <card5></card5>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <!-- <el-tooltip effect="dark" placement="right" content="Vite构建工具"> -->
        <div @click="open('https://vitejs.cn/')"></div>
        <!-- </el-tooltip> -->
        <!-- <el-tooltip effect="dark" placement="right" content="Vue3框架"> -->
        <div @click="open('https://cn.vuejs.org/')"></div>
        <!-- </el-tooltip> -->
        <!-- <el-tooltip effect="dark" placement="right" content="Pinia状态管理工具"> -->
        <div @click="open('https://pinia.web3doc.top/')"></div>
        <!-- </el-tooltip> -->
      </el-col>
      <el-col :span="12">
        <!-- <el-tooltip effect="dark" placement="left" content="Vue3组件库"> -->
        <div @click="open('https://element-plus.gitee.io/zh-CN/')"></div>
        <!-- </el-tooltip> -->
        <!-- <el-tooltip effect="dark" placement="left" content="Echarts可视化图表库"> -->
        <div @click="open('https://echarts.apache.org/zh/index.html')"></div>
        <!-- </el-tooltip> -->
        <!-- <el-tooltip effect="dark" placement="left" content="Vue-Router路由管理工具"> -->
        <div @click="open('https://router.vuejs.org/zh/')"></div>
        <!-- </el-tooltip> -->
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import card1 from "./home/card1.vue";
import card2 from "./home/card2.vue";
import card3 from "./home/card3.vue";
import card4 from "./home/card4.vue";
import card5 from "./home/card5.vue";
const open = (src: string) => {
  window.open(src);
};
</script>
<style scoped lang="scss">
:deep(.el-card__body) {
  padding: 0px;
}

:deep(.card-header) {
  display: flex;
  align-items: center;
}

.Dhome {
  width: 100%;
  height: max-content;
  min-height: 100%;

  .el-row {
    margin-top: 20px;

    &:first-child {
      margin-top: 0px;
    }

    &:nth-child(2) {
      .el-col {
        min-width: 300px;
        min-height: 400px;
      }
    }

    &:last-child {
      .el-col {
        margin-bottom: 100px;
        min-width: 300px;
        min-height: 150px;
        display: flex;
        justify-content: space-between;

        div {
          width: calc(32% - 7px);
          min-width: 100px;
          border-radius: 10px;
          background-color: #fff;
          background-size: 80% 80%;
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;
        }

        &:first-child {
          div {
            &:first-child {
              background-image: url(/img/logo/vite.svg);
            }

            &:nth-child(2) {
              background-image: url(/img/logo/vue3.svg);
            }

            &:last-child {
              background-image: url(/img/logo/pinia.svg);
            }
          }
        }

        &:last-child {
          div {
            &:first-child {
              background-image: url(/img/logo/elementplus.svg);
            }

            &:nth-child(2) {
              background-size: 100px 100px;

              background-image: url(/img/logo/echarts.png);
            }

            &:last-child {
              background-image: url(/img/logo/vue3.svg);
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 1200px) {
  .Dhome .el-row {
    &:first-child {
      .el-col {
        max-width: 100%;
        margin-top: 20px;
        &:first-child {
          margin-top: 0px;
        }
      }
    }
  }
}
@media only screen and (max-width: 700px) {
  .Dhome {
    .el-row {
      flex-direction: column;
      margin-top: 0px;

      .el-col {
        margin-top: 20px;
        max-width: 100%;
      }

      &:last-child {
        .el-col {
          &:first-child {
            margin-bottom: 0px;
          }
        }
      }
    }
  }
}
</style>
